<template>
  <view class="grace-loading grace-ellipsis" v-if="loadingType < 4">
    <view
      class="grace-loading-icon ali-icon"
      v-if="loadingType === 1"
      :style="{ color: iconColor }"
    >
      &#xe6a0;
    </view>
    <text class="grace-loading-text" :style="{ color: textColor }">
      {{ loadingText[loadingType] }}
    </text>
  </view>
</template>

<script lang="ts" setup>
  import { propTypes } from '@/utils/propTypes';

  defineProps({
    loadingType: propTypes.number.def(0),
    loadingText: propTypes.array.def(['上拉加载更多', '正在努力加载', '没有更多了~']),
    iconColor: propTypes.string.def('#888888'),
    textColor: propTypes.string.def('#888888'),
  });
</script>

<style lang="scss" scoped>
  @keyframes grace-rotate360 {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .grace-loading {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 16rpx 0;
    padding-bottom: 36rpx;
    line-height: 40rpx;
    color: #888;
  }
  .grace-loading-text {
    margin-left: 12rpx;
    // margin-top: 20rpx;
    font-size: 24rpx;
  }
  .grace-loading-icon {
    width: 40rpx;
    height: 40rpx;
    justify-content: center;
    line-height: 40rpx;
    font-size: 30rpx;
    text-align: center;
    font-family: 'grace-iconfont';
    animation: grace-rotate360 1200ms infinite linear;
  }
</style>
